<template>
	<view>
		<view class="page_header">
			<uni-search-bar v-model="state.searchKey" @confirm="handleSearch"
				placeholder="搜索课程或者关键字"
				cancel-button="none" radius="36">
			</uni-search-bar>
			<navigator url="/pages/notice/list"><img src="/static/image/home/notice.png"  /></navigator>
		</view>
		<view class="page_filter">			
			<uni-data-select
				v-model="state.navVal"
				:clear="false"
				:localdata="navList"
				@change="handleNavChange"
			></uni-data-select>
			<uni-data-select
				v-model="state.navVal2"
				:clear="false"
				:localdata="navList"
				@change="handleNavChange"
			></uni-data-select>
		</view>
		<view class="page_notice">
			<img src="/static/image/home/notice01.png" alt="" />
			<span>今日学习人次6人，在线学习人数16人</span>
		</view>
		<view class="course_count">
			<span>共找到6门课程</span>
			<RadioButton v-model="state.activeTab" :options="tabList" @change="handleTabChange" />
		</view>
		<uni-list :border="false">
			<uni-list-item v-for="item in list" :key="item.id" @click="handleCourseCheck">
				<template #body>
					<view class="course-item" @click="handleCourseCheck">
						<img class="course-cover-image" src="" alt="" />
						<view class="course-cover-title">2dasdas</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- <uni-load-more :status="loadMoreStatus" ></uni-load-more> -->
		
		
		<!-- 提示窗示例 -->
		<uni-popup class="courseDialog" ref="courseDialog" type="dialog" >
			<img class="dialog-close-btn" src="/static/image/home/dialog-close.png" alt="" @click="courseDialog.close()" />
			<uni-popup-dialog type="info" title="请选择模式" >
				<view class="model-button">自主训练</view>
				<view class="model-button">自主考核</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useList } from '@/hooks/UseList'
	import RadioButton from '@/components/RadioButton/index.vue'
	const state = ref({
		searchKey: '',
		navVal: '',
		navVal2: '',
		activeTab: 0
	})
  const navList = ref([
		{ value: 0, text: "篮球" },
		{ value: 1, text: "足球" },
		{ value: 2, text: "游泳" },
	])
  const tabList = ref([
		{ value: 0, label: "最新" },
		{ value: 1, label: "热门" }
	])
	const list = ref([
		{ value: 0, label: "最新" },
		{ value: 1, label: "热门" }
	])
  // const { list, total, loadMoreStatus } = useList()
	const handleSearch = () =>  {
		console.log(state.searchKey);
	}
	const handleNavChange = () => {
		
	}
	const handleTabChange = () => {
		
	}
	
	const courseDialog = ref(null)
	const handleCourseCheck = () => {
		console.log(11111);
		courseDialog.value.open()
	}
</script>

<style lang="scss">
.page_header {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 7px 10px;
	.uni-searchbar {
		flex: 1;
		padding: 0;
		margin-right: 10px;
	}
	img {
		width: 24px;
		height: 24px;
	}
}
.page_filter {
	display: flex;
	align-items: center;
	background-color: #fff;
}
.page_notice {
	height: 36px;
	display: flex;
	align-items: center;
	padding: 0 7px;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 12px;
	color: #F26831;
	background: #F5F5F5;
	img {
		width: 20px;
		height: 20px;
		margin-right: 2px;
	}
}
.course_count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 10px;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 14px;
	color: #666666;
}

::v-deep {
	.page_header {
		.uni-searchbar__box {
			height: 36px;
			justify-content: flex-start;
		}
	}
	.page_filter {
		.uni-select {
			border: none;
		}
		.uni-select__input-box {
			justify-content: center;
		}
		.uni-select__input-text {
			margin-right: 5px;
			width: fit-content;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #333333;
		}
	}
	
	.uni-list {
		flex-direction: row!important;
		flex-wrap: wrap;
		padding: 0 10px;
		box-sizing: border-box;
		justify-content: space-between;
		&::after {
			display: none;
		}
		.uni-list--border {
			display: none;
		}
		.uni-list-item {
			width: calc(50% - 5px);
			margin-bottom: 15px;
			.uni-list-item__container {
				padding: 0;
			}
			.uni-list-item__header {
				display: none;
			}
			.course-item {
				flex: 1;
			}
			.course-cover-image {
				display: block;
				width: 100%;
				height: 103px;
				border-radius: 4px;
				object-fit: cover;
				margin-bottom: 10px;
			}
			.course-cover-title {
				padding: 0 10px;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 16px;
				color: #333333;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				margin-bottom: 10px;
			}
		}
	}
	
	.courseDialog {
		.dialog-close-btn {
			position: absolute;
			width: 24px;
			height: 24px;
			top: 6px;
			right: 6px;
		}
		.model-button {
			width: 200px;
			height: 45px;
			line-height: 45px;
			border-radius: 45px;
			text-align: center;
			color: #fff;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 16px;
			margin: 30px auto;
			background-color: green;
		}
		.uni-dialog-content {
			display: block;
			padding: 0;
			overflow: hidden;
		}
		.uni-dialog-button-group {
			display: none;
		}
		.uni-dialog-title {
			padding-top: 20px;
			margin-bottom: 20px;
		}
		.uni-dialog-title-text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 16px;
			color: #333333;
		}
	}
}
</style>
